<template>
  <BasicModal
    :="$attrs"
    :wrapClassName="prefixCls + '-modal'"
    destroyOnClose
    :footer="null"
    width="60%"
    title="预览"
    :defaultFullscreen="true"
    @register="registerModal"
    @cancel="handleClose"
  >
    <template #title>
      <div> 预览 </div>
    </template>
    <div class="relative h-full min-h-[65vh]">
      <div v-if="isDownload" class="absolute top-1 right-10 action z-90">
        <a-button @click="handleDownload()" size="small"> 下载 </a-button>
      </div>
      <FramePage class="absolute w-full" :frameSrc="frameSrc" />
    </div>
  </BasicModal>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { commonFilePreviewApi } from '/@/api/config-center/model-design';
  import { downloadByApiUrl } from '/@/utils/file/download';
  import { isUrl } from '/@/utils/is';
  import FramePage from '/@/components/HFileReview/src/Iframe.vue';
  import { downloadByData } from '/@/utils/file/download';

  const props = defineProps({
    valueField: {
      type: String,
      default: 'value',
    },
    downloadField: {
      type: String,
      default: 'url',
    },
    isDownload: {
      type: Boolean,
      default: true,
    },
    file: {
      type: Object,
      default: () => {},
    },
    apiFn: {
      type: Function,
    },
    downloadFileParam: {
      type: Object,
      default: () => {},
    },
  });

  const emit = defineEmits(['downloadFile', 'previewFile', 'register', 'cancel']);

  const { prefixCls } = useDesign('h-file-review');
  const [registerModal] = useModalInner();

  const frameSrc = ref('');

  const handleDownload = async (item?) => {
    const dataFile = item || props.file;
    const labelField = props.valueField || 'label';
    const downloadField = props.downloadField || 'url';

    // if (dataFile[downloadField]) {
    //   if (isBase64(dataFile[downloadField])) {
    //     dataFile[downloadField] = Base64.decode(dataFile[downloadField]);
    //   }
    //   return;
    // }
    if (props.apiFn) {
      const ret = await props.apiFn(props.downloadFileParam);
      const { data, headers } = ret;
      const filename =
        headers['content-disposition'] && headers['content-disposition'].split('fileName=')[1];
      downloadByData(data, (decodeURI(filename) || name) as string);
      return;
    }

    downloadByApiUrl({
      url: dataFile[downloadField],
      fileName: dataFile[labelField] || dataFile['fileName'],
    });
  };
  const handleClose = () => {
    emit('cancel', false);
  };

  const handleReview = async (item) => {
    const dataFile = item || props.file;
    const labelField = props.valueField || 'label';
    const valueField = props.valueField || 'value';
    if (isUrl(dataFile[valueField])) {
      downloadByApiUrl({ url: dataFile[labelField], fileName: dataFile[labelField] });
      return;
    }
    frameSrc.value = '';
    const data = await commonFilePreviewApi(dataFile[valueField]);
    frameSrc.value = data;
  };
  emit('downloadFile', handleDownload);
  emit('previewFile', handleReview);
</script>

<style lang="less" scoped></style>
